<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="public/lib/layer/css/layui.css">
    <link rel="stylesheet" href="public/css/public.css">
    <link rel="stylesheet" href="public/css/user.css">
</head>

<body id="body">
    <div class="header user">
        <div class="nav-contact">
            <div class="row">
                <ul class="address"></ul>
                <div class="logo">
                    <a href="index.html">
                        <img src="public/images/sdk_logo.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="row nav-menu">
            <div class="inline-block menu"></div>
            <div class="inline-block tool-side"></div>
        </div>
    </div>
    <div class="user-body" id="user">
        <div class="row clearfix">
            <div class="fl user-nav">
                <ul>
                    <li>
                        <div class="nav-title"><i class="icon icon-info"></i><span class="user-arrow">个人资料</span></div>
                        <div class="user-info" id="userInfo"></div>
                    </li>
                    <li class="nav-select current-nav" data-item="records">
                        <div class="nav-title"><i class="icon icon-records"></i><span>消费记录</span></div>
                    </li>
                    <li class="nav-select" data-item="focus">
                        <div class="nav-title"><i class="icon icon-focus"></i><span>我的关注</span></div>
                    </li>
                    <li class="nav-select" data-item="recharge">
                        <div class="nav-title"><i class="icon icon-recharge"></i><span>充值中心</span></div>
                    </li>
                    <li class="nav-select" data-item="invite">
                        <div class="nav-title"><i class="icon icon-invite"></i><span>邀请码</span></div>
                    </li>
                </ul>
            </div>
            <div class="fr user-contain">
                <div class="user-detail" id="userDetail"></div>
                <div class="user-item">
                    <div class="records-content" id="records">
                        <h5 class="records-title">我的消费记录</h5>
                        <table class="records-table">
                            <thead>
                                <tr>
                                    <th width="120px">操作</th>
                                    <th width="150px">时间</th>
                                    <th width="110px">金额</th>
                                    <th width="450px">主题</th>
                                </tr>
                            </thead>
                            <tbody id="J_operationRecord"></tbody>
                        </table>
                        <!-- <div class="fr pagination"></div> -->
                    </div>
                    <div class="focus-content" id="focus">
                        <h5 class="focus-title">我关注的老师</h5>
                        <ul class="focus-ul" id="J_focus"></ul>
                    </div>
                    <div class="recharge-content" id="recharge">
                        <h5 class="recharge-title">充值悬赏币</h5>
                        <div class="pay-detail">
                            <span class="pay-money-item" data-money="50">50元=50悬赏币</span>
                            <span class="pay-money-item" data-money="100">100元=120悬赏币</span>
                            <span class="pay-money-item current-pay-item" data-money="500">500元=650悬赏币</span>
                            <span class="pay-money-other">
                                <label for="otherMoney">其他金额：</label>
                                <input class="other-money" type="text" id="otherMoney" placeholder="请输入充值的金额">
                            </span>
                        </div>
                        <p class="pay-label">支付<span class="pay-label-text" id="payCosts">500</span>元</p>
                        <ul class="payment-list">
                            <li class="payment-item payment-union" data-type="union"></li>
                            <li class="payment-item payment-alipay current-payment" data-type="alipay"></li>
                            <li class="payment-item payment-weixin" data-type="wx"></li>
                        </ul>
                        <input type="button" class="pay-now" value="立即充值" id="payNow">
                    </div>
                    <div class="recharge-content invite-content" id="invite">
                        <h5 class="recharge-title">邀请码</h5>
                        <ul class="invite-lists" id="J_invite"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="teacher-recommend">
        <div class="row">
            <div class="recommend-title">推荐老师</div>
            <ul class="focus-ul recommend-ul" id="J_recommend"></ul>
        </div>
    </div>
    <!-- 页脚 -->
    <div class="footer"></div>
    <script id="J_userDetail_tpl" type="text/html">
        <div class="fl user-head-photo">
            <img src="public/images/sdk_user_icon.png" data-lazyload-img="{{G.uploadurl + d.avatorUrl}}" alt="" class="avator">
        </div>
        <div class="fl user-head-detail">
            <div class="user-head-name">
                <div class="fl user-info-name">
                    <span class="name">{{d.username}}</span>您好！
                </div>
                <!-- <div class="fr user-invite-code">你的邀请码是：<span class="code">{{d.exclusiveInviteCode}}</span></div> -->
            </div>
            <div class="user-head-info">
                <div class="verify inline-block">
                    <span class="verify-item {{# if(d.username){}}is-real-name-true{{#}else{}}is-real-name-false{{#}}}"></span>
                    <span class="verify-item {{# if(d.email){}}is-mail-true{{#}else{}}is-mail-false{{#}}}"></span>
                    <span class="verify-item {{# if(d.phone){}}is-phone-true{{#}else{}}is-phone-false{{#}}}"></span>
                </div>
                <ul class="time-ul">
                    <li>
                        上次登录时间：<span class="last-login">{{new Date(d.lastLoginTime).format('YYYY-MM-DD HH:ii:ss')}}</span>
                    </li>
                    <li>
                        注册时间：<span class="reg-time">{{new Date(d.registrationTime).format('YYYY-MM-DD HH:ii:ss')}}</span>
                    </li>
                </ul>
                <p>A类VIP下载时间：{{d.vipDayA}}天 &emsp;B类VIP下载时间：{{d.vipDayB}}天</p>
            </div>
            <div class="remains">
                <div class="fl">钱包余额：<span class="remain">{{d.balance}}</span>悬赏币
                    <input type="button" class="recharge" value="充值" id="showRecharge">
                </div>
                <div class="fr">累计消费：<span class="total-cost">{{d.consumption}}</span>悬赏币</div>
            </div>

            {{# if(d.userType == 'SHARE'){ }}
                <p class="share">下级数量：{{d.subordinateNumber}}<br>下级消费数量：{{d.firstOrderNumber}}<br>累计提成：{{d.commission}}</p>
            {{#}; }}
        </div>
    </script>
    <script id="J_userInfo_tpl" type="text/html">
        <p class="j-user-name">用户名:{{formatVal(d.username)}}</p>
        <p class="user-gender">性别:{{genderShow(d.gender)}}</p>
        <p class="user-phone">电话:{{formatVal(d.phone)}}</p>
        <p class="user-mail">邮箱:{{formatVal(d.email)}}</p>
        <div class="update-password" id="J_update_pwd">修改密码</div>
        <div class="user-logout" id="J_logout">退出登录</div>
    </script>
    <script id="J_focus_tpl" type="text/html">
        {{#d.forEach(function(val,index){}}
        <li>
            <div class="focus-icon">
                <img class="avator" src="{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{val.teacherId}}.png" alt="">
            </div>
            <p class="focus-name">{{val.teacher.base.aliasName?val.teacher.base.aliasName:val.teacher.base.name}}</p>
            <p class="focus-score-title">上周战绩：</p>
            <p class="focus-scores">{{formatVal(val.teacher.correct1)}}%</p>
            <div class="new-reports" data-id="{{val.teacherId}}">最新报告</div>
        </li>
        {{#});}}
    </script>
    <script id="J_teacher_tpl" type="text/html">
        {{#d.forEach(function(val,index){}}
        <li>
            <div class="focus-icon">
                <img class="avator" src="{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{val.userId}}.png" alt="">
            </div>
            <p class="focus-name">{{val.base.aliasName?val.base.aliasName:val.base.name}}</p>
            <p class="focus-score-title">上周战绩：</p>
            <p class="focus-scores">{{formatVal(val.correct1)}}%</p>
            <div class="new-reports" data-id="{{val.userId}}">最新报告</div>
        </li>
        {{#});}}
    </script>
    <!-- 老师资料 -->
    <div class="teacher-infos" id="teacherInfoLayer">
        <div class="teacherInfo-layer-head">老师资料</div>
        <div class="teacherInfo-layer-body" id="J_teacher_info"></div>
    </div>
    <script id="J_teacher_info_tpl" type="text/html">
        <div class="teacher-layer-status">
            <div class="inline-block teacher-layer-icon">
                <img src="{{G.defaultAvator}}" alt="{{d.base.name}}" class="avator" data-lazyload-img="{{G.uploadurl}}/avator/{{d.userId}}.png">
            </div>
            <div class="inline-block">
                <div class="teacher-layer-name">{{d.base.aliasName?d.base.aliasName:d.base.name}}<span class="teacher-layer-label">{{d.base.teacherType}}/{{formatVal(d.base.educationalBackgroundValue)}}</span></div>
                <div class="teacher-layer-tag">
                   <!--  <span class="tag-span">证券从业资格证</span>
                    <span class="tag-span">本科学历</span>
                    <span class="tag-span">从业十年</span>
                    <span class="tag-span">老司机</span> -->
                </div>
            </div>
            <div class="inline-block teacher-layer-score">
                <p>前5期战绩：<span class="correct correct1">{{formatVal(d.correct5)}}%</span></p>
                <p>上期战绩：<span class="correct correct5">{{formatVal(d.correct1)}}%</span></p>
            </div>
        </div>
        <div class="teacher-layer-info">
            <ul>
                <li>年龄：{{formatVal(d.user.age)}}</li>
                <li>关注人数：{{d.extend.attentionNumber}}</li>
                <li>累计发表报告：{{d.extend.contributeNumber}}篇</li>
                <li>性别：{{genderShow(d.user.gender)}}</li>
                <li>从业时间：{{d.base.jobTime ? new Date(d.base.jobTime).format("YYYY-mm") : "-"}}</li>
                <li>累计获得打赏：{{d.extend.exceptionalMoney}}元</li>
            </ul>
            {{# if (G.getCookie("sdk_user_type") == "USER" && G.getCookie("sdk_user_id")) {}}
            <input type="button" class="teacher-layer-focus {{# if(!d.attentioned){ }}hide{{# } }}" id="J_off_attention" data-teacherid="{{d.userId}}" value="取消关注">
            <input type="button" class="teacher-layer-focus {{# if(d.attentioned){ }}hide{{# } }}" id="J_attention" data-teacherid="{{d.userId}}" value="+ 关注TA"> {{# }; }}
        </div>
        <div class="recent-reports">
            <h2>最近发表的报告：</h2>
            <ul class="teacher-layer-reports" id="J_recent_report"></ul>
        </div>
        <div class="recommend-reports">
            <h2>精品推荐：</h2>
            <ul class="teacher-layer-reports-recommend" id="J_recommend_report"></ul>
        </div>
    </script>
    <script id="J_reports_tpl" type="text/html">
        {{# if(d.length){ }}
            {{# d.forEach(function(val,index){ }}
            <li class="product-list">
                <p class="report-time" title="{{val.title}}">{{val.title}}</p>
                <p>发布时间：</p>
                <p class="tac">{{new Date(val.createTime).format('YYYY-MM-DD')}}</p>
                <p class="tac">下载量：<i>{{val.downloadNumber}}</i></p>
                {{# if (val.free) { }}
                    <a class="report-download down-free" data-id="{{val.productId}}">免费下载</a>
                {{# } else if (val.payed) { }}
                    <a class="report-download down-free" data-id="{{val.productId}}">下载</a>
                {{# } else { }}
                    <div class="report-download J_buy_product" data-id="{{val.productId}}">打赏{{val.promotionsPrice}}</div>
                {{# } }}
            </li>
            {{# }); }}
        {{# }else{ }}
             <li class="tac"><img src="public/images/sdk_no_content.png" alt="暂无内容"></li>
        {{# }; }}
    </script>
    <script id="T_operationRecord" type="text/html">
        {{# if(d.length){ }} {{# d.forEach(function(item,index){ }}
        <tr>
            <td>{{showOperationRecord(item.type)}}</td>
            <td>{{new Date(item.createTime).format('YYYY-mm-dd hh:ii')}}</td>
            <td>{{item.money}}悬赏币</td>
            <td class="subject">{{item.data.title}}</td>
        </tr>
        {{# }); }} {{# } else { }}
        <tr>
            <td colspan="4">暂无数据</td>
        </tr>
        {{# }; }}
    </script>
    <script id="T_inviteTpl" type="text/html">
       <li>
            
            <div id="myInviteCode" class="{{# if(d.inviteCode){ }} show {{# }else{ }} hide {{# }; }}">
                邀请码：<span id="myInvite">{{formatVal(d.inviteCode)}}</span>
            </div>
            <div id="myInviteCodeContent" class="{{# if(d.inviteCode){ }} hide {{# }else{ }} show {{# }; }}">
                <label for="inviteCode">填写邀请码：</label><input type="text" class="my-invide-code" id="inviteCode">
                <input type="button" value="保存" class="invite-save-btn" id="saveInvite">
            </div>
        </li>
        <li>客户邀请码：{{d.exclusiveInviteCode}}</li>
        <li>业务邀请码：{{formatVal(d.commissionInviteCode)}}</li>
    </script>
    <script src="public/lib/layer/layui.all.js"></script>
    <script src="public/js/G.js"></script>
    <script src="public/js/user.js"></script>
    <script src="public/js/rechargeApi.js"></script>
    <script src="public/js/rechargeOrder.js"></script>
    <script src="public/js/focus.js"></script>
    <script src="public/js/operationRecord.js"></script>
    <script src="public/js/teacher.js"></script>
    <script src="public/js/product.js"></script>
    <script src="public/js/attention.js"></script>
    <script src="public/js/public.js"></script>
    <script src="http://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script>
    function showOperationRecord(type) {
        switch (type) {
            case "REWARD":
                return "发布悬赏";
            case "PRODUCT":
                return "打赏报告";
            default:
                return "未知";
        }
    }

    function loadOperationRecord(pageId) {
        operationRecord.getList({
            operationRecordType: "OUT",
            pageId: pageId
        }, function(data) {
            if (!data.count) {
                return;
            }
            laytpl($('#T_operationRecord').html()).render(data.list, function(html) {
                $("#J_operationRecord").html(html)
            })
        })
    }

    loadOperationRecord(1);

    user.getInfo({}, function(data) {
        console.log(data)
        laytpl($('#J_userInfo_tpl').html()).render(data, function(html) {
            $('#userInfo').html(html)
        })
        laytpl($('#J_userDetail_tpl').html()).render(data, function(html) {
            $('#userDetail').html(html)
        })
        laytpl($('#T_inviteTpl').html()).render(data, function(html) {
            $('#J_invite').html(html)
        })
        lazyload()
    })

    var payCosts = $('.pay-money-item.current-pay-item').data('money');
    var payType = $('.payment-item.current-payment').data('type');
    $(document).on('click', '.pay-money-item', function() {
        $(this).siblings('.current-pay-item').removeClass('current-pay-item');
        $(this).addClass('current-pay-item')
        $('#payCosts').html($(this).data('money'))
        $('#otherMoney').val('')
        payCosts = $(this).data('money');
    })

    function resetParams() {
        $('#payCosts').html(0);
        $('.pay-money-item[data-money="500"]').addClass('current-pay-item');
        $('#payCosts').html($('.pay-money-item[data-money="500"]').data('money'))
        payCosts = 500;
    }
    $(document).on('keyup', '#otherMoney', function(e) {        
        if (!$(this).val()) {
            resetParams();
            return false;
        }
        if(!/^[1-9]\d*$/.test($(this).val())){
            layer.msg('请输入正确的充值金额')
            return;
        }
        // if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode >= 96 && e.keyCode <= 105) {
            $('.pay-money-item.current-pay-item').removeClass('current-pay-item')
            $('#payCosts').html($(this).val());
            payCosts = $(this).val();
        // } else {
        //     $(this).val('');
        //     resetParams();
        //     return false;
        // }
    })
    // $(document).on('click', '.payment-item', function() {
    //     $(this).siblings('.current-payment').removeClass('current-payment');
    //     $(this).addClass('current-payment')
    //     payType = $(this).data('type')
    // })

    //立即支付
    $(document).on('click', '#payNow', function() {
        var type = $('.current-payment').data('type');
        console.log(type)
        switch(type){
            case 'wx':
                rechargeApi.create(payCosts,{},function(data) {
                    orderId = data.rechargeOrderId;
                    G.get("pay/wx/rechargeOrder/web/" + orderId,{},function(data){
                        layer.confirm('充值是否完成？', {title:false,closeBtn:false,btnAlign: 'c',btn:['完成充值','放弃充值']}, function(index){
                            rechargeOrder.getStatus(orderId,'wx',{},function(order){
                                layer.msg('充值成功')
                                setTimeout(function(){
                                    location.reload();
                                },1500)
                            },function(e){
                                layer.msg('充值失败')
                            })
                        },function(){
                            layer.msg('取消充值')
                        });
                        wxPayTpl()
                        $('#qrcode').qrcode(data.codeUrl);
                        layer.open({
                            area: ['300px', 'auto'],
                            title: false,
                            closeBtn: 1,
                            type: 1,
                            shadeClose: false,
                            scrollbar: false,
                            content: $('#J_wx_tpl')
                        })
                    })
                })
                break;
            case 'alipay':
                var newOpen = window.open();
                var orderId = -1;
                rechargeApi.create(payCosts,{},function(data) {
                    orderId = data.rechargeOrderId;
                    newOpen.location = rechargeOrder.getUrl(payType,orderId,'web');
                    layer.confirm('充值是否完成？', {title:false,closeBtn:false,btnAlign: 'c',btn:['完成充值','放弃充值']}, function(index){
                        rechargeOrder.getStatus(orderId,'alpay',{},function(){
                            layer.msg('充值成功')
                            setTimeout(function(){
                                location.reload();
                            },1500)
                        },function(){
                            layer.msg('充值失败')
                        })
                    },function(){
                        layer.msg('取消充值')
                    });
                })
                break;
            return;
        }
        // var newOpen = window.open();
        // rechargeApi.create(payCosts, {}, function(data) {
        //     layer.confirm('充值是否完成？', {title:false,closeBtn:false,btnAlign: 'c',btn:['完成充值','放弃充值']}, function(index){
        //         rechargeOrder.getStatus(data.rechargeOrderId,{},function(order){
        //             layer.msg('充值成功')
        //             location.reload()
        //         },function(e){
        //             layer.msg('充值失败')
        //         })
        //     },function(){
        //         layer.msg('放弃充值')
        //     });
        //     newOpen.location = rechargeOrder.getUrl(payType, data.rechargeOrderId)
        // })
    })


    teacher.getList({
        pageSize: 8,
        recommend: true
    }, function(data) {
        console.log(data)
        laytpl($('#J_teacher_tpl').html()).render(data.list, function(html) {
            $('#J_recommend').html(html)
        })
        lazyload();
    })

    //点击充值显示充值栏
    $(document).on('click', '#showRecharge', function() {
        $('#recharge').show()
        $('#recharge').siblings('div').hide()
    })
    $(document).on('click', '.nav-select', function() {
        var item = $(this).data('item');
        $(this).addClass('current-nav')
        $(this).siblings('.nav-select').removeClass('current-nav');
        switch (item) {
            case 'records':
                loadOperationRecord(1);
                break;
            case 'focus':
                var params = {
                    pageId: 1,
                    pageSize: 12
                }
                focus.getList(params, function(data) {
                    if (!data.count) {
                        return;
                    }
                    console.log(data.list);
                    laytpl($('#J_focus_tpl').html()).render(data.list, function(html) {
                        $('#J_focus').html(html)
                    lazyload();
                    })
                })
                break;
            case 'recharge':
                break;
        }
        $('#' + item).show();
        $('#' + item).siblings('div').hide()
    })
    $(document).on("click", "#J_attention", function() { //关注
        var id = $(this).attr("data-teacherid");
        attentionApi.put(id, function() {
            $("#J_attention").addClass("hide");
            $("#J_off_attention").removeClass("hide");
            layer.msg("关注成功")
        })
    }).on('click', '#J_off_attention', function() { //取消关注
        var id = $(this).attr("data-teacherid");
        attentionApi.delete(id, function() {
            $("#J_attention").removeClass("hide");
            $("#J_off_attention").addClass("hide");
            layer.msg('取消关注成功')
        })
    }).on("click", ".J_buy_product", function() { //点击支付需要根据id查询一次产品 然后调用openPayLayer支付弹窗，复制以下代码即可
        var id = $(this).attr("data-id");
        openPayLayer(id, '支付已取消')
    })
    //获取某个老师的信息
    function teacherLayer(userId) {
        layer.load(1)
        teacher.findOne(userId, {}, function(data) {
            laytpl($('#J_teacher_info_tpl').html()).render(data, function(html) {
                $('#J_teacher_info').html(html)
            })
            lazyload()
            reports(userId, '#J_recent_report', false);
            reports(userId, '#J_recommend_report', true);
            layer.closeAll()
            layer.open({
                area: ['800px', '760px'],
                title: false,
                closeBtn: 0,
                shadeClose: true,
                type: 1,
                scrollbar: false,
                content: $('#teacherInfoLayer')
            })
        })
    }
    //获取老师报告
    function reports(userId, dom, quintessence) {
        product.getList({
            teacherId: userId,
            pageSize: 5,
            quintessence: quintessence
        }, function(data) {
            laytpl($('#J_reports_tpl').html()).render(data.list, function(list) {
                $(dom).html(list)
            })
            lazyload()
        })
    }

    $(document).on('click', '.new-reports', function() {
        var userId = $(this).data('id');
        teacherLayer(userId)
    })
    $(document).on('click','#saveInvite',function(){
        var inviteCode = $('#inviteCode').val().trim();
        console.log(inviteCode)
        if(!inviteCode){
            layer.msg('请填写邀请码')
            return;
        }
        user.setInviteCode({inviteCode: inviteCode},function(){
            layer.msg('设置成功')
            $('#myInvite').html(inviteCode)
            $('#myInviteCode').show()
            $('#myInviteCodeContent').hide()
        })
    })
    
    </script>
</body>

</html>